<template>
  <div class="image-wrapper " :class="size">
    <div class="circle-wrapper">
      <div class="circle1"></div>
      <div class="float">
        <div class="floating4">
          <div id="roate4">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CommonCircle',
  props: ['size'],
  data () {
    return {
    }
  },
  mounted () {
  },
  methods: {
  },
  beforeDestroy () {
  }
}
</script>

<style scoped lang="scss">
.circle-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../../../assets/images/new/big.png) no-repeat center;
  background-size: 80%;
  .circle1 {
    transform-style: preserve-3d;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -12rem 0 0 -15rem;
    width: 30rem;
    height: 30rem;
    background: url(../../../assets/images/new/circle.png) no-repeat center;
    background-size: contain;
    transform: rotateX(70deg);
    animation: circle 5s linear infinite;
  }
  .floating4 {
    width: 400px;
    height: 35%;
    background: url(../../../assets/images/new/5.png) no-repeat bottom center;
    background-size: 180px 120px;
    margin: 0 auto;
    animation: float4 8s linear infinite;
    #roate4 {
      width: 300px;
      height: 140px;
      // background: url(../../../assets/images/new/cicle3.png) no-repeat center;
      background-size: 80%;
      margin: auto;
      top: -60px;
      position: relative;
      .roate-item4 {
        position: absolute;
        display: inline-block;
        width: 100%;
        top: 30px;
        font-size: 28px;
        text-align: center;
      }
    }
  }
  @keyframes circle {
    0% {
      transform: rotateX(70deg) rotateZ(0);
    }
    100% {
      transform: rotateX(70deg) rotateZ(360deg);
    }
  }
  @keyframes scale {
    0% {
      transform: translate(-50%, -50%) scale(0.9);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(1.5);
      opacity: 0;
    }
  }
  @keyframes float4 {
    0% {
      transform: translateY(0%);
    }
    50% {
      transform: translateY(20%);
    }
    100% {
      transform: translateY(0%);
    }
  }
}

</style>
